<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
		/** 使用相对定位 */
			#navlist { position:relative;	}
			#navlist li {
				/** 子元素使用绝对定位 */
				margin:0; 	padding:0; 	list-style:none;
				position:absolute; 	top:0;
			}
			#navlist li, #navlist a {
				/** 设置为块元素就可以设置宽高了 整个宽度的区域都可以点击了，不设置为块元素就没有点击效果 */
				 height:44px;	display:block;
		 	}
			
			#home { 
				left:0px; width:46px;
				background:url('images/img_navsprites.gif') 0 0;
			}
				
			#home a:hover {
				background:url('images/img_navsprites.gif') 0 0;
				background-color:#ffff00;
				border: 1px solid #ff0000;
			}
			
			#prev {
				left:46px;width:43px;
				/** -47 从图片的左上角为原点 将图片向左移动47px */
				background:url('images/img_navsprites.gif') -47px 0;
			}
			#prev a:hover {
				background:url('images/img_navsprites.gif') -47px 0;
				background-color:#ffff00;
				border: 1px solid #ff0000;
			}
			/** -91 其实这里可以写成43 图片的左上角为原点 将图片向右移动43px 采用平铺的方式 */
			#next {
				 left:91px;width:43px;
				 background:url('images/img_navsprites.gif') -91px 0;
			}
			#next a:hover {
				background:url('images/img_navsprites.gif') -91px 0;
				background-color:#ffff00;
				border: 1px solid #ff0000;
			}
			#bottom_div {
				position:relative;
				top:60px;
			}
    </style>
  </head>

  <body>
    <ul id="navlist">
      <li id="home"><a href="/"></a></li>
      <li id="prev"><a href="/css/"></a></li>
      <li id="next"><a href="/css/"></a></li>
    </ul>
    
    <div id="bottom_div">
    	<img src="images/img_navsprites.gif"></img>
    </div>
  </body>
</html>
			